<template>
	<p ref="p">{{ num }}</p>
	<button @click="add">按钮</button>
	<p>{{ user.phone }}</p>
	<button @click="update">按钮</button>
</template>

<script setup lang="ts">
// setup 启动setup语法谈
// lang="ts" 启动ts环境
import {
	ref,
	reactive,
	onMounted,
	onBeforeUnmount,
	watch,
	computed,
} from "vue";
import { User } from "./type";

// 声明接受自定义事件
defineEmits(["xxx"]);
// 声明接受props数据
// const props = defineProps<{
// 	age: number;
// }>({
// 	age: Number,
// });

// ref获取DOM元素 - 要定义ref数据，名称和上面一致
const p = ref<HTMLElement>();

// 生命周期函数 onMounted, onBeforeUnmount
onMounted(() => {
	console.log("mounted111");
	console.log((p.value as HTMLElement).innerText);
});
onMounted(() => {
	console.log("mounted222");
});

// ref 用来定义单个响应式数据
const num = ref(0);
// const cartList = ref<object[]>([]);

// 监视
// 注意：先定义数据，在监视
watch<number>(
	num,
	(newVal: number, oldVal: number) => {
		console.log(newVal, oldVal);
	},
	{
		// deep: true, immediate: true
	}
);

// const a = computed(() => {});
// const b = computed({ get() {}, set() {} });

// 定义methods
// 在setup语法中没有this。this指向undefined
const add = () => {
	// ref定义响应式数据，数据在value上
	// console.log(num.value);
	num.value++;
};

// reactive 用来定义多个响应式数据
// 常用于表单项
// 注意：定义的数据不能直接赋值，只能对象.xxx去使用
let user = reactive<User>({
	phone: "",
	password: "",
	code: "",
});

const update = () => {
	user.phone = "1111111";
	// user = { phone: "111", password: "222", code: "333" }; // 不是响应式
};
</script>

<style></style>
